<template>
	<my-panel
		title="组件"
		size="medium"
		:border="false"
		icon="BarChart"
		shadow="hover"
		:bodyStyle="{ padding: 0 }"
		class="f1 h0 m-t-2"
		fit
	>
		<template #handle>
			<ChartsSearch :menuOptions="$store.user.packagesList" style="width: 160px" />
		</template>
		<div class="menu-width-box h100 flex-col">
			<div class="f1 h0 overflow-y-auto">
				<el-collapse>
					<el-collapse-item v-for="item in $store.user.packagesList" :key="item.label" :title="item.label">
						<template #title> <my-icon :icon="item.icon" size="14" class="m-x-10" />{{ item.label }} </template>
						<ChartsItemBox :menuOptions="item.list" />
					</el-collapse-item>
				</el-collapse>
			</div>
		</div>
	</my-panel>
</template>

<script setup>
import ChartsSearch from './ChartsSearch.vue';
import ChartsItemBox from './ChartsItemBox.vue';
</script>

<style lang="scss" scoped>
.menu-width-box {
	width: 100%;
}
:deep(.el-collapse-item__content) {
	padding-bottom: 0;
}
</style>
